import React, { PureComponent } from 'react';
import moment from 'moment';
import { Link, routerRedux } from 'dva/router';
import { connect } from 'dva';
import { Table, Card, Radio, Input, Button, Icon, Dropdown, Menu } from 'antd';

import styles from './ListPlay.less';

const RadioButton = Radio.Button;
const RadioGroup = Radio.Group;
const { Search } = Input;

@connect(({ gameList, loading }) => ({
  gameList,
  loading: loading.effects['gameList/fetch'],
}))
export default class ListPlay extends PureComponent {
  state = {};

  componentDidMount() {
    this.props.dispatch({
      type: 'gameList/fetch',
      payload: {},
    });
  }

  beginSign = item => {
    this.props.dispatch({
      type: 'gameList/changeStatus',
      payload: {
        id: item.id,
        status: 'SIGN',
      },
    });
  };

  stopSign = item => {
    this.props.dispatch({
      type: 'gameList/changeStatus',
      payload: {
        id: item.id,
        status: 'OPEN',
      },
    });
  };

  render() {
    const {
      gameList: { gameData },
      loading,
    } = this.props;

    const extraContent = (
      <div className={styles.extraContent}>
        <RadioGroup defaultValue="all">
          <RadioButton value="all">全部</RadioButton>
          <RadioButton value="progress">报名中</RadioButton>
          <RadioButton value="waiting">编排中</RadioButton>
          <RadioButton value="piaying">进行中</RadioButton>
          <RadioButton value="">已完成</RadioButton>
        </RadioGroup>
        <Search className={styles.extraContentSearch} placeholder="请输入" onSearch={() => ({})} />
      </div>
    );

    const columns = [
      {
        title: '序号',
        dataIndex: 'id',
        width: 80,
      },
      {
        title: '赛事名称',
        dataIndex: 'title',
      },
      {
        title: '举办单位',
        dataIndex: 'owner',
      },
      {
        title: '报名时间',
        dataIndex: 'signStartDate',
        render: (value, row) => (
          <span>
            从 {moment(value).format('YYYY-MM-DD')} <br />到{' '}
            {moment(row.signEndDate).format('YYYY-MM-DD')}
          </span>
        ),
        width: 150,
      },
      {
        title: '比赛时间',
        dataIndex: 'startDate',
        render: (value, row) => (
          <span>
            从 {moment(value).format('YYYY-MM-DD')} <br />到{' '}
            {moment(row.endDate).format('YYYY-MM-DD')}
          </span>
        ),
        width: 150,
      },
      {
        title: '比赛地点',
        dataIndex: 'position',
        width: 200,
      },
      {
        title: '状态',
        dataIndex: 'status',
        width: 80,
      },
      {
        title: '操作',
        render: (value, row) => <Link to={`/badminton/detail/${row.id}`}>赛事详情</Link>,
        width: 100,
      },
    ];

    const menu = item => (
      <Menu>
        <Menu.Item>
          <Link to={`/badminton/detail/${item.id}`}>编辑赛事</Link>
        </Menu.Item>
        {/*item.status === 'NEW' && <Menu.Item><Button onClick={()=>this.beginSign(item)}>开放报名</Button></Menu.Item> */}
        {item.status === 'SIGN' && (
          <Menu.Item>
            <Button onClick={() => this.stopSign(item)}>结束报名</Button>
          </Menu.Item>
        )}
        {item.status === 'SIGN' && (
          <Menu.Item>
            <Link to={`/badminton/sign-table/${item.code}`}>参赛名单</Link>
          </Menu.Item>
        )}
        {item.status === 'OPEN' && (
          <Menu.Item>
            <Link to={`/badminton/sign-table/${item.code}`}>参赛名单</Link>
          </Menu.Item>
        )}
        {item.status === 'OPEN' && (
          <Menu.Item>
            <Button onClick={() => this.bianpai(item)}>结束公示</Button>
          </Menu.Item>
        )}
        {item.status === 'OPEN' && (
          <Menu.Item>
            <Button onClick={() => this.bianpai(item)}>开始编排</Button>
          </Menu.Item>
        )}
        <Menu.Item>
          <Link to={`/badminton/sign-table/${item.code}`}>参赛名单</Link>
        </Menu.Item>
        <Menu.Item>
          <Link to={`/badminton/chouqian/${item.code}`}>抽签</Link>
        </Menu.Item>
        <Menu.Item>
          <Link to={`/badminton/score/${item.code}`}>成绩</Link>
        </Menu.Item>
      </Menu>
    );

    const MoreBtn = data => (
      <Dropdown overlay={menu(data.data)}>
        <a>
          更多 <Icon type="down" />
        </a>
      </Dropdown>
    );

    return (
      <div className={styles.standardList}>
        <Card
          className={styles.listCard}
          bordered={false}
          title="赛事列表"
          style={{ marginTop: 24 }}
          bodyStyle={{ padding: '0 32px 40px 32px' }}
          extra={extraContent}
        >
          <Link to="/badminton/add-play">
            <Button type="dashed" style={{ width: '100%', marginBottom: 8 }} icon="plus">
              添加
            </Button>
          </Link>
          <Table
            loading={loading}
            dataSource={gameData.list}
            columns={columns}
            pagination={gameData.pagination}
            bordered
          />
        </Card>
      </div>
    );
  }
}
